<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>密码笔记本</title>
		<link rel="stylesheet" type="text/css" href="aui-20170109-v2.1/css/aui.css"/>
		<style type="text/css">
			.bel{
				width: 10em; /*保证文字不会被半汉字截断,显示10个文字*/
				overflow:hidden;/*超出长度的文字隐藏*/
				text-overflow:ellipsis;/*文字隐藏以后添加省略号*/
				white-space: nowrap;/*强制不换行*/
			}
		</style>
		<link rel="icon" type="image/png" sizes="144x144" href="icon.jpeg"/>
	</head>
	<body>
		<header class="aui-bar aui-bar-nav">
			<a class="aui-pull-left aui-btn aui-btn-outlined" onclick="showPopup('top-left')">
				<span class="aui-iconfont aui-icon-menu"></span>
			</a>
			<div class="aui-title">密码笔记本</div>
			<a class="aui-pull-right aui-btn aui-btn-outlined" href="addNote.html">
				<i class="aui-iconfont aui-icon-plus"></i>
			</a>
		</header>
		<!--<div class="aui-tips aui-margin-b-15" id="tips" hidden>
			<i class="aui-iconfont aui-icon-info"></i>
			<div class="aui-tips-title">消息提示条消息提示条消息提示</div>
			<i class="aui-iconfont aui-icon-close" tapmode="" onclick="closeTips()"></i>
		</div>-->
		<div class="aui-content" style="margin-bottom: 50px" id="page1">
			<ul class="aui-list aui-list-in" id="notes">
			</ul>
		</div>
		<div class="aui-content aui-margin-b-15" hidden id="page2">
			<ul class="aui-list aui-list-in" id="setting">
				<li class="aui-list-item">
				</li>
				<!--<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label">
							开启云同步
						</div>
						<div class="aui-list-item-input">
							<input type="checkbox" class="aui-switch" id="cloud_sync">
						</div>
					</div>
				</li>-->
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label aui-font-size-20">
							密令
						</div>
						<div class="aui-list-item-input aui-font-size-20">
							<input type="password" id="token" class="aui-font-size-20">
						</div>
						<div class="aui-btn aui-btn-info" onclick="token_toggle()">显示</div>
					</div>
				</li>
				<li class="aui-list-item"></li>
				<li class="aui-list-item" style="padding: 0 80px">
					<div class="aui-btn aui-btn-info" onclick="cloud_upload()">数据上传</div>
					<div class="aui-btn aui-btn-warning" onclick="cloud_down()">本地同步</div>
				</li>
			</ul>
		</div>
		<footer class="aui-bar aui-bar-tab" id="footer">
			<div class="aui-bar-tab-item aui-active" tapmode="" data-item-order="0">
				<i class="aui-iconfont aui-icon-pencil"></i>
				<div class="aui-bar-tab-label">笔记</div>
			</div>
			<div class="aui-bar-tab-item" tapmode="" data-item-order="1">
				<i class="aui-iconfont aui-icon-gear"></i>
				<div class="aui-bar-tab-label">设置</div>
			</div>
		</footer>
		<input type="file" name="upload" id="upload" accept="text/plain" hidden/>
	</body>
	<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="aui-20170109-v2.1/script/aui-dialog.js" type="text/javascript" charset="utf-8"></script>
	<script src="aui-20170109-v2.1/script/api.js" type="text/javascript" charset="utf-8"></script>
	<script src="aui-20170109-v2.1/script/aui-popup-new.js" type="text/javascript" charset="utf-8"></script>
	<script src="aui-20170109-v2.1/script/aui-toast.js" type="text/javascript" charset="utf-8"></script>
	<script src="aui-20170109-v2.1/script/aui-tab.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/sha3.js"></script>
	<script src="js/aes.js"></script>
	<script src="js/md5.js"></script>
	<script src="js/cloud_sync.js"></script>
	<script type="text/javascript">
		var dialog = new auiDialog();
		var toast = new auiToast();
		var auitab = new auiTab();
		$(function(){
			pwNotes = JSON.parse(localStorage.getItem("PWnotes"));
			// if (is_sync=="true") cloud_sync();
			if (pwNotes) {
				if (!pwNotes.version) {
					pwNotes.version = new Date().getTime();
					localStorage.setItem("PWnotes", JSON.stringify(pwNotes));
				}
				init();
			}
			$("#token").val(localStorage.getItem("note_token"));
			// if (is_sync=="true") $("#cloud_sync")[0].checked = true;
			$("#notes").on('click','.aui-list-item',function (o) {
				location.href = 'note.html?noteId='+$(o.currentTarget).data("id");
			})
			/*$("#cloud_sync").change(function () {
				localStorage.setItem("cloud_sync", $("#cloud_sync")[0].checked);
				if ($("#cloud_sync")[0].checked) cloud_sync();
			})*/
			$("#token").change(function () {
				localStorage.setItem("note_token", $("#token").val());
				// $("#cloud_sync")[0].checked = false;
			})
		})
		function init() {
			$("#notes").html("");
			var note_html = '';
			var pwNotes = JSON.parse(localStorage.getItem("PWnotes"));
			for (let s of pwNotes.list) {
				let title_html = s.stick ? '<div class="aui-label aui-label-danger aui-label-outlined">常用</div>' : '';
				let label_html = '';
				if (s.stick) {
					note_html = '<li class="aui-list-item" data-id="' + s.noteId + '"><div class="aui-list-item-inner"><div class="aui-list-item-title bel">' + title_html + s.title + '</div><div class="aui-list-item-right">' + label_html + '</div></div></li>' + note_html;
				} else {
					note_html+=	'<li class="aui-list-item" data-id="' + s.noteId + '"><div class="aui-list-item-inner"><div class="aui-list-item-title bel">' + title_html + s.title + '</div><div class="aui-list-item-right">' + label_html + '</div></div></li>';
				}
			}
			$("#notes").append(note_html);
		}

		function token_toggle() {
			if ($("#token").attr("type") == "text") {
				$(event.currentTarget).html("显示");
				$("#token").attr("type", "password");
			} else {
				$(event.currentTarget).html("隐藏");
				$("#token").attr("type", "text");
			}
		}
		function fakeClick(obj) {
			var ev = document.createEvent("MouseEvents");
			ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
			obj.dispatchEvent(ev);
		}

		function exportRaw(name, data) {
			var urlObject = window.URL || window.webkitURL || window;
			var export_blob = new Blob([data]);
			var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
			save_link.href = urlObject.createObjectURL(export_blob);
			save_link.download = name;
			fakeClick(save_link);
		}
		var popup = new auiPopup();
		function showPopup(location){
			popup.init({
				frameBounces:true,//当前页面是否弹动，（主要针对安卓端）
				location:location,//位置，top(默认：顶部中间),top-left top-right,bottom,bottom-left,bottom-right
				buttons:[{
					image:'',
					text:'数据导出',
					value:'wx'//可选
				},{
					image:'',
					text:'数据导入',
					value:'wx-circle'
				}],
			},function(ret){
				if(ret){
					if (ret.buttonIndex == 1) {
						let exportText = {
							PWnotes: pwNotes,
							notes: []
						};
						for (let i = 0; i < pwNotes.list.length; i++) {
							exportText.notes.push(JSON.parse(localStorage.getItem(pwNotes.list[i].noteId)));
						}
						exportRaw("PWnotes.txt", JSON.stringify(exportText));
					}else if (ret.buttonIndex == 2) {
						$("#upload").click();
					}
				}
			})
		}
		/**
		 * 上传函数
		 * @param fileInput DOM对象
		 * @param callback 回调函数
		 */
		var getFileContent = function (fileInput, callback) {
			if (fileInput.files && fileInput.files.length > 0 && fileInput.files[0].size > 0) {
				//下面这一句相当于JQuery的：var file =$("#upload").prop('files')[0];
				var file = fileInput.files[0];
				if (window.FileReader) {
					var reader = new FileReader();
					reader.onloadend = function (evt) {
						if (evt.target.readyState == FileReader.DONE) {
							callback(evt.target.result);
						}
					};
					// 包含中文内容用gbk编码
					reader.readAsText(file, 'gbk');
				}
			}
		};

		/**
		 * upload内容变化时载入内容
		 */
		document.getElementById('upload').onchange = function () {
			getFileContent(this, function (str) {
				console.log(str);
				if (!$.isNumeric(str)) {
					try {
						let importText = JSON.parse(str);
						localStorage.setItem("PWnotes", JSON.stringify(importText.PWnotes));
						for (let i = 0; i < importText.notes.length; i++) {
							localStorage.setItem(importText.notes[i].noteId, JSON.stringify(importText.notes[i]));
						}
						toast.success({
							title: "笔记导入成功！",
							duration: 1000
						});
						setTimeout(function () {
							location.reload();
						}, 1000);
					}catch (e) {
						toast.fail({
							title: "笔记导入失败！"+e,
							duration: 1000
						});
						setTimeout(function () {
							location.reload();
						}, 1000);
					}
				}
			});
		};

		apiready = function(){
			api.parseTapmode();
		}
		var tab = new auiTab({
			element:document.getElementById("footer")
		},function(ret){
			// console.log(ret);
			if(ret){
				switch (ret.index) {
					case 1:
						$("#page1").show();
						$("#page2").hide();
						break;
					case 2:
						$("#page1").hide();
						$("#page2").show();
						break;

				}
			}
		});
	</script>
</html>
